<template>
  <Panel title="实时环境信息" width="380px">
    <div style="padding: 16px 0px;">
      <div class="environment" ref="environmentRef"></div>
      <div class="environment-title">
        <div>温度</div>
        <div>湿度</div>
        <div>PM2.5</div>
      </div>
    </div>
  </Panel>
</template>

<script lang="ts" setup>
import * as echarts from "echarts";
const environmentRef = ref();

onMounted(() => {
  echarts.init(environmentRef.value).setOption({
    series: [
      // 温度
      {
        name: "temperature",
        type: "gauge",
        startAngle: 210,
        endAngle: -30,
        center: ["17%", "50%"],
        radius: "100%",
        min: 0,
        max: 70,
        splitNumber: 7,
        axisLine: {
          lineStyle: {
            width: 1,
            color: [
              [0.85714, "#C4C4C4"],
              [1, "#FE8D3B"],
            ],
          },
        },
        pointer: {
          length: "50%",
          width: 1,
          offsetCenter: [0, "-30%"],
          itemStyle: {
            color: "auto",
          },
        },
        axisTick: {
          show: false,
          splitNumber: 7,
          distance: -10,
          length: 6,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        splitLine: {
          length: 4,
          distance: 0,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        axisLabel: {
          color: "#C4C4C4",
          fontSize: 10,
          distance: 10,
          rotate: "tangential",
        },
        title: {
          offsetCenter: [0, "15%"],
          fontSize: 12,
          color: "#29EC78",
        },
        detail: {
          fontSize: 12,
          offsetCenter: [0, "-15%"],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value) + "℃";
          },
          color: "inherit",
        },
        data: [
          {
            value: 32,
            name: "正常",
          },
        ],
      },

      // 湿度
      {
        name: "temperature",
        type: "gauge",
        startAngle: 210,
        endAngle: -30,
        center: ["48%", "50%"],
        radius: "100%",
        min: 0,
        max: 100,
        splitNumber: 5,
        axisLine: {
          lineStyle: {
            width: 1,
            color: [
              [0.8, "#C4C4C4"],
              [1, "#FE8D3B"],
            ],
          },
        },
        pointer: {
          length: "50%",
          width: 1,
          offsetCenter: [0, "-30%"],
          itemStyle: {
            color: "auto",
          },
        },
        axisTick: {
          show: false,
          splitNumber: 5,
          distance: -12,
          length: 6,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        splitLine: {
          length: 4,
          distance: 0,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        axisLabel: {
          color: "#C4C4C4",
          fontSize: 10,
          distance: 10,
          rotate: "tangential",
        },
        title: {
          offsetCenter: [0, "15%"],
          fontSize: 12,
          color: "#29EC78",
        },
        detail: {
          fontSize: 12,
          offsetCenter: [0, "-15%"],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value) + "%";
          },
          color: "inherit",
        },
        data: [
          {
            value: 60,
            name: "正常",
          },
        ],
      },

      // PM2.5
      {
        name: "temperature",
        type: "gauge",
        startAngle: 210,
        endAngle: -30,
        center: ["82%", "50%"],
        radius: "100%",
        min: 0,
        max: 300,
        splitNumber: 6,
        axisLine: {
          lineStyle: {
            width: 1,
            color: [
              [0.85714, "#C4C4C4"],
              [1, "#FE8D3B"],
            ],
          },
        },
        pointer: {
          length: "50%",
          width: 1,
          offsetCenter: [0, "-30%"],
          itemStyle: {
            color: "auto",
          },
        },
        axisTick: {
          show: false,
          splitNumber: 6,
          distance: -12,
          length: 6,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        splitLine: {
          length: 4,
          distance: 0,
          lineStyle: {
            color: "auto",
            width: 1,
          },
        },
        axisLabel: {
          color: "#C4C4C4",
          fontSize: 10,
          distance: 10,
          rotate: "tangential",
        },
        title: {
          offsetCenter: [0, "15%"],
          fontSize: 12,
          color: "#FE8D3B",
        },
        detail: {
          fontSize: 12,
          offsetCenter: [0, "-15%"],
          valueAnimation: true,
          formatter: function (value) {
            return Math.round(value) + "%";
          },
          color: "inherit",
        },
        data: [
          {
            value: 266,
            name: "超标",
          },
        ],
      },
    ],
  });
});
</script>
<style lang="scss" scoped>
.environment {
  height: 90px;
}
.environment-title {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  color: #ffffff;
  font-size: 14px;
}
</style>
